<template>
  <div class="info_box">
    <template v-if="!render_data">
      <loading></loading>
    </template>
    <template v-else>
      <!-- loading -->
      <li class="title">{{ render_data.title }}</li>
      <li class="info">
        <Icon icon="user"></Icon>
        <span> 作者 </span>
        <span>{{ render_data.author }} </span>
        <Icon icon="time"></Icon>
        <span> 发表于 </span>
        <span> {{ render_data.up_time }} </span>
        <Icon icon="daohang"></Icon>
        <span> 分类 </span>
        <span v-for="(item, i) in render_data.classification" :key="i">
          &nbsp;{{ item }}</span
        >
        <Icon icon="look"></Icon>
        <span> 阅读量 </span>
        <span> {{ render_data.reading }} </span>
        <Icon icon="liuY"></Icon>
        <span> 留言 </span>
        <span> {{ render_data.message }} </span>
      </li>
      <li class="sny">
        {{ render_data.synopsis }}
      </li>
      <li class="content" v-html="render_data.content"></li>
      <li class="message">
        <MessageB></MessageB>
      </li>
    </template>
  </div>
</template>
<script>
import { Axios } from "../../axios";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Icon from "../../components/IconFont";
import MessageB from "../message/index.vue";
import loading from "../../components/loading";
export default {
  components: { Icon, MessageB, loading },
  setup(prop, ctx) {
    let render_data = ref(0);
    let id = ref(useRouter().currentRoute.value.params.id);
    onMounted(() => {
      async function fn() {
        let ins = (
          await Axios({
            url: "/data/getIdContent",
            method: "post",
            data: {
              id: id.value,
            },
          })
        ).data;

        let it = ins.data.ins[0];
        let str = it.classification;
        if (str.includes(",")) {
          it.classification = str.split(",");
        } else {
          it.classification = [it.classification];
        }
        render_data.value = it;
      }
      fn();
    });
    return {
      render_data,
    };
  },
};
</script>
<style lang="less">
@import url("../../assets/global/var.less");
.info_box {
  .global_border_shadow();
  margin-top: 120px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  min-height: 100vh;
  position: relative;

  .title {
    font-size: 26px;
    font-weight: 600;
    color: @title_color;
    text-align: center;
    padding-top: 20px;
  }
  .info {
    font-size: 12px;
    color: @info_color;
    padding-top: 15px;
    padding-bottom: 20px;
    text-align: center;
  }
  .sny {
    font-size: 16px;
    color: @content_color;
    line-height: 2.5em;
    // .more_line_ellipsis();
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
  }
  .content {
    margin-top: 20px;
  }
  .message {
    width: 100%;
    .message_box {
      width: 96.5%;
      textarea {
        max-width: 87.5%;
        min-width: 87%;
      }
    }
  }
  li {
    list-style: none;
  }
}
</style>